<template>

  <el-dialog
    top="20px"
    :title="defaultValue.title"
    :visible="tableConfig.show"
    @close="tableConfig.show = false"
    :show-close="tableConfig.showClose"
    :destroy-on-close="tableConfig.destroyOnClose"
    width="1100px">

    <div>

      <span>记事类型：<el-tag :size="tagSize">{{notepad.typeName}}</el-tag></span>
      &nbsp;
      <span>重要性：<el-tag type="success" :size="tagSize">{{importanceToChinese(notepad.importance)}}</el-tag></span>
    </div>
    <br/>

      <!--md预览展示-->
      <mavon-editor v-model="notepad.content" style="font-size: 14px"
                   :subfield="false"
                   :defaultOpen="'preview'"
                   :editable="false"
                   :toolbarsFlag="false"
                   >
       </mavon-editor>


    <span slot="footer" class="dialog-footer">
      <el-button plain type="danger" @click="delNotepadTips(notepad.id)">删除</el-button>
      <el-button plain type="warning" @click="toUpdNotepad(notepad)">编辑</el-button>
      <el-button plain type="warning" v-if="notepad.discard === 1" @click="toUpdCompleteTips(notepad.id)">已完成</el-button>
      <el-button plain type="primary" @click="tableConfig.show = false">关闭</el-button>
    </span>

  </el-dialog>

</template>

<script>

  import http from '@/utils/http'

  export default {
    name: "NotepadDetails",
    data(){
      return {
        // 默认值，进入页面后的值
        defaultValue: {
          // 弹出框标题
          title: '详情',
        },
        // 表格的默认值
        tableConfig: {
          // 关闭时销毁 Dialog 中的元素
          destroyOnClose: true,
          // 弹出框是否打开
          show: false,
          // 是否显示关闭按钮
          showClose: true,
        },
        // 记事本数据
        notepad:{
          userId: null,
          typeId: null,
          title: null,
          content: '',
          importance: null,
          flagColour: null,
          typeName: null,
        },
        // 列表的尺寸
        size: 'small',
        // tag 的大小
        tagSize: 'small',
      }
    },
    methods: {
      /**
       * 跳转到更新页面
       * @param notepad 记事本
       */
      toUpdNotepad(notepad){
        this.$emit('openUpdNotepad', notepad)
        this.tableConfig.show = false
      },
      /**
       * 修改已完成前提示信息
       * @param id 记事本主键
       */
      toUpdCompleteTips(id){
        this.$confirm('是否确认将记事本移入已完成?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          // 确定删除
          this.toUpdComplete(id)

        }).catch(() => {
          // 取消删除
        });
      },
      /**
       * 已完成
       * @param id 记事本主键
       */
      toUpdComplete(id){
        http.post("/notepad/updateComplete", {
          id: id,
        }).then(response => {
          let res = response.data;
          if (res.status === 'error'){
            // 401是token过期跳转的
            if (res.code !== 401){
              this.$message.error(res.msg);
            }
            return
          }
          // 刷新页面
          this.$emit('getNotepadListPage', null)
          this.$message.success("操作成功");
          this.tableConfig.show = false

        }).catch(error => {
          this.$message.error(error.message);
        })
      },
      /**
       * 物理删除记事本提示信息
       */
      delNotepadTips(id){
        this.$confirm('是否删除当前记事本, 删除后无法恢复，是否继续?', '提示', {
          confirmButtonText: '确定删除',
          cancelButtonText: '取消删除',
          type: 'warning'
        }).then(() => {
          // 确定删除
          this.delNotepadById(id)

        }).catch(() => {
          // 取消删除
        });
      },
      /**
       * 物理删除影视
       * @param id 主键
       */
      delNotepadById(id){
        http.post("/notepad/delNotepadById", {
          id: id,
        }).then(response => {
          let res = response.data;
          if (res.status === 'error'){
            // 401是token过期跳转的
            if (res.code !== 401){
              this.$message.error(res.msg);
            }
            return
          }
          // 刷新页面
          this.$emit('getNotepadListPage', null)
          this.$message.success("删除成功");
          this.tableConfig.show = false

        }).catch(error => {
          this.$message.error(error.message);
        })
      },
      /**
       * 弹出详情框
       * @param notepad 记事本数据信息
       */
      openNotepadDetailed(notepad){
        this.defaultValue.title = notepad.title
        this.notepad = notepad
        this.tableConfig.show = true
        this.$store.commit('navigationListChange', ['任务计划中心', '记事本', '详情'])
      },
      /**
       * 重要性转中文
       * @param importance 重要性
       */
      importanceToChinese(importance){
        if (importance == null){
          // 绿色 #57B40D
          return "不重要不紧急";
        } else if (0 === importance){
          // - #CD1D8A
          return "核心级的重要事情";
        } else if (1 === importance){
          // #FE8787
          return "重要紧急";
        } else if (2 === importance){
          // #FD8F1E
          return "不重要但紧急";
        } else if (3 === importance){
          // #FCE407
          return "重要但不紧急";
        } else {
          return "不重要不紧急";
        }
      },
    }
  }
</script>

<style scoped>

</style>
